<template lang="pug">
  .clearfix
    Modal(
      width="480"
      v-model="isShowRepealModal"
      title="撤销"
      :closable="false"
      :mask-closable="false"
    )
      Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120")
        FormItem(label="撤销原因：" prop="remark"  :label-width="130")
          Input.input-has-border(v-model="formValidate.remark" clearable)

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmit" :loading="!isCanSubmit") 确定
</template>

<script>
import { WorkFlowApi } from '../../WorkFlow.api.js';
export default {
  name: '',

  props: {
  },

  data () {
    return {
      isShowRepealModal: false,
      isCanSubmit: true,
      record: null,
      formValidate: {
        remark: '',
      },
      ruleValidate: {
        remark: [
          { required: true, message: '撤销原因不能为空', trigger: 'blur' }
        ]
      },
    }
  },

  watch: {
  },

  mounted () {
  },

  methods: {
    show (row) {
      this.isShowRepealModal = true
      this.record = row
      console.log('this.record: ', this.record)
    },

    cancel () {
      this.isShowRepealModal = false
      this.$refs.formValidate.resetFields()
    },

    handleSubmit () {
      this.$refs.formValidate.validate((valid) => {
        if (valid) {
          const params = {
            remark: this.formValidate.remark,
            primaryKeyID: this.record ? this.record.primaryKeyID : ''
          }
          console.log('提交 params', params)
          WorkFlowApi.Recover(params).then(resp => {
            console.log('%c submit resp: ', 'color:red', resp)
            if (resp.data.success) {
              this.$Message.success(resp.data.message)
              this.cancel()
              this.$emit('query')
            } else {
              this.$Message.error({
                content: resp.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        }
      })
    },
  }
}
</script>

<style lang="less" scope>
.action-icon{
  width: 28px;
  height: 25px;
  line-height: 23px;
  color: #c5c8ce;
  background-color: #f7f7f7;
  border: solid 1px #dcdee2;
  text-align: center;
  font-size: 14px;
  border-radius: 3px;
  transition: all .3s;
  cursor: pointer;
  padding: 0;
  &:hover{
    color: #fff;
    background-color: #2d8cf0;
    border-color: #2d8cf0;
  }
}
</style>
